<template>
  <view class="publishDemand">
    <view class="publishDemand-content">
      <view class="formLabel uni-flex border-bottom uni-justify-between bankCode">
        <text>抬头类型</text>
        <view class="uni-flex uni-align-center">
          <uni-data-checkbox v-model="invoiceInfo.invoiceCategory" :localdata="sex" icon="right"></uni-data-checkbox>
        </view>
      </view>
      <view class="formLabel uni-flex border-bottom uni-justify-between bankCode">
        <text>
          发票抬头
          <text style="color: #ff6a47">*</text>
        </text>
        <view class="uni-flex uni-align-center">
          <!-- <view class="slectBank">请填写需要开具发票的企业名称</view> -->
          <uni-easyinput :inputBorder="false" placeholderStyle="font-size:28rpx" v-model="invoiceInfo.name"
            :clearable="false" placeholder="请填写需要开具发票的企业名称"></uni-easyinput>
        </view>
      </view>
      <view class="formLabel uni-flex uni-align-center uni-justify-between border-bottom">
        <text>税号</text>
        <view class="uni-flex uni-align-center">
          <uni-easyinput :inputBorder="false" v-model="invoiceInfo.code" placeholderStyle="font-size:28rpx"
            :clearable="false" placeholder="请填写纳税人识别号"></uni-easyinput>
        </view>
      </view>
      <view class="formLabel uni-flex uni-align-center uni-justify-between border-bottom">
        <text>开户银行</text>
        <view class="uni-flex uni-align-center">
          <uni-easyinput :inputBorder="false" v-model="invoiceInfo.bankDeposit" placeholderStyle="font-size:28rpx"
            :clearable="false" placeholder="请填写公司开户银行"></uni-easyinput>
        </view>
      </view>
      <view class="formLabel uni-flex border-bottom uni-justify-between bankCode">
        <text>银行账号</text>
        <view class="uni-flex uni-align-center">
          <uni-easyinput :inputBorder="false" v-model="invoiceInfo.bankNumber" placeholderStyle="font-size:28rpx"
            :clearable="false" placeholder="请填写银行账号"></uni-easyinput>
        </view>
      </view>
      <view class="formLabel uni-flex border-bottom uni-justify-between bankCode">
        <text>企业地址</text>
        <view class="uni-flex uni-align-center">
          <uni-easyinput :inputBorder="false" v-model="invoiceInfo.enterpriseAddress" placeholderStyle="font-size:28rpx"
            :clearable="false" placeholder="请填写企业地址"></uni-easyinput>
        </view>
      </view>
      <view class="formLabel uni-flex uni-justify-between bankCode">
        <text>企业电话</text>
        <view class="uni-flex uni-align-center">
          <uni-easyinput :inputBorder="false" v-model="invoiceInfo.enterprisePhone" placeholderStyle="font-size:28rpx"
            :clearable="false" placeholder="请填写企业电话"></uni-easyinput>
        </view>
      </view>
    </view>
    <view class="publishDemand-content" style="margin-top: 32rpx">
      <view class="formLabel uni-flex uni-justify-between bankCode">
        <text>开票金额</text>
        <view class="uni-flex uni-align-center">
          <view class="slectBank">
            <text class="price">{{ invoiceInfo.invoiceAmount }}</text>
            元
          </view>
        </view>
      </view>
    </view>
    <view class="publishDemand-content" style="margin-top: 32rpx">
      <view class="formLabel uni-flex uni-justify-between bankCode">
        <text>电子邮箱</text>
        <view class="uni-flex uni-align-center">
          <uni-easyinput :inputBorder="false" v-model="invoiceInfo.email" placeholderStyle="font-size:28rpx"
            :clearable="false" placeholder="用于向您发送电子发票"></uni-easyinput>
        </view>
      </view>
    </view>
    <button type="default" class="submit" @click="submit">提交</button>
  </view>
</template>

<script setup>
import { computed, onMounted, reactive, ref, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { orderInvoice } from "@/api/consumerOrder.js";

const eventChannel = getCurrentInstance().proxy.getOpenerEventChannel();

const sex = ref([
  {
    text: "公司",
    value: "COMPANY"
  },
  {
    text: "个人/非企业单位",
    value: "PERSON"
  }
]);

const invoiceInfo = reactive({
  orderId: "",
  invoiceCategory: "COMPANY",
  name: "",
  code: "",
  bankDeposit: "",
  enterpriseAddress: "",
  enterprisePhone: "",
  invoiceAmount: "",
  email: ""
});

const submit = async () => {
  uni.showLoading({
    title: "保存中...",
    mask: true
  });

  orderInvoice(invoiceInfo)
    .then((response) => {
      console.log(response, "response");
      if (response?.code === 200) {
        uni.showToast({
          title: "提交成功",
          icon: "success"
        });
        if (status.value === 'finish') {
          // 已下单
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/order/consumerOrder/orderList'
            });
          }, 1500);
        } else {
          // 下订单时：
          setTimeout(() => {
            eventChannel.emit("acceptDataInvoicing", invoiceInfo);
            uni.navigateBack();
          }, 1500);
        }

      }
    })
    .catch((err) => {
      uni.showToast({
        title: "提交失败",
        icon: "error"
      });
    })
    .finally((res) => {
      uni.hideLoading();
      console.log(res, "res");
    });
};

const status = ref(null)
onLoad((option) => {
  console.log(option, '-=------------------')
  invoiceInfo.orderId = option.id;
  invoiceInfo.invoiceAmount = option.paymentAmount;

  status.value = option?.status || ''
});
</script>

<style scoped lang="scss">
.publishDemand {
  padding: 26rpx 24rpx 81rpx;
  background: #f5f5f5;
  min-height: calc(100vh - 26rpx);

  .subtitle {
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    margin: 32rpx 0 24rpx;
  }

  .publishDemand-content {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 0 26rpx 0 23rpx;

    .border-bottom {
      border-bottom: 1px solid #e2e2e2;
    }

    .formLabel {
      padding: 24rpx 0;

      .slectBank {
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;

        .price {
          color: #ff6a47;
        }
      }

      text {
        font-weight: 500;
        font-size: 28rpx;
        color: #303133;
        line-height: 70rpx;
      }
    }
  }

  .publishDemand-button {
    width: 100%;
    height: 88rpx;
    background: #ffffff;
    border-radius: 20rpx;
    text-align: center;
    font-weight: 400;
    font-size: 28rpx;
    color: #eb4747;
    line-height: 88rpx;
    margin: 40rpx auto 0;
  }

  .submit {
    width: 93%;
    height: 80rpx;
    background: #2f80ed;
    border-radius: 44rpx;
    color: #fff;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin-top: 150rpx;
  }
}

::v-deep .uni-easyinput {
  width: 430rpx !important;
}
</style>
